<!DOCTYPE html>
<html>
<head>
<title>카드 맞추기 게임</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="cardGame.css">
<script type="text/JavaScript">
	
	// 변수 선언
	var canvas;							// 캔버스 객체  		
  	var canvas2d;						// 캔버스 2d 객체	
  	var cardWidth;					// 카드 너비
  	var cardHeight;					// 카드 높이
  	var cardArr=[];						// 카드 저장 배열  	
	var cx=70;								// 초기 카드 첫번째줄 x좌표
	var cx2=70;							// 초기 카드 두번째줄 x좌표
	var cy1=140;						// 초기 카드 첫번째줄 y좌표	
	var cy2=290;						// 초기 카드 두번째줄 y좌표
	var sx;									// 카드 x좌표
	var sy;									// 카드 y좌표
	var drawback;						// 카드 뒷면 그리기
	var drawface;						// 카드 앞면 그리기
	var cardno;							// 카드 번호
	var no=1;								// 카드를 순서대로 뒤집은지 확인하기 위한 키 값 설정 
	var t;										// 타이머 함수 호출
	var i=0;									// 시간을 계산 하기 위한 변수 초기화
	var timerfirst=true;
		
	// 초기화 함수 => 페이지 로딩시 초기화
 	function init() {
  		canvas = document.getElementById('canvas');
  		canvas2d = document.getElementById('canvas').getContext('2d');
  		clock = document.getElementById('canvas');
  		clock2d = document.getElementById('canvas').getContext('2d');
  		canvas.addEventListener('click', choose, false);
  		starttime = new Date();
  		starttime = Number(starttime.getTime());
  		drawad();
  		makedeck();
 	}
	
	// 카드 객체 생성
 	function Card(cardWidth, cardHeight, timg, no) {
  		this.sx;
  		this.sy;
  		this.cardWidth = cardWidth;
  		this.cardHeight = cardHeight;
  		this.timg = timg;
  		this.drawback = drawback;
  		this.drawface = drawface;
  		var imga = new Image();
  		var imgb = new Image();
  		imga.src = timg;
  		imgb.src = "touch_game_img/event.jpg";
  		this.img = imga;
  		this.imgback = imgb;
  		this.cardno = no;
 	}
 	
	// 광고 문구 그리기
	function drawad() {
		canvas2d.fillStyle = "rgb(255,255,255)";
 		canvas2d.fillRect(75, 30, 650, 80);
		canvas2d.font="bold 35px Tahoma";
  		canvas2d.fillStyle="rgb(0,216,255)";
		canvas2d.fillText("Music Deserves Respect", 90, 65);
  		canvas2d.fillStyle="rgb(134,229,127)";
		canvas2d.fillText("So I gotta resperct", 90, 100);		
  		canvas2d.fillStyle="rgb(255,148,54)";
		canvas2d.fillText("SONY MDR-1R", 440, 100);
 	}
	
	// 카드 뒷면 그리기
 	function drawback() {
  		canvas2d.fillStyle = "rgb(255,255,255)";
  		canvas2d.fillRect(this.sx, this.sy, this.cardWidth, this.cardHeight);
  		canvas2d.drawImage(this.imgback, this.sx, this.sy, this.cardWidth, this.cardHeight);
 	}
 	
 	function drawface() {
 		canvas2d.fillStyle = "rgb(255,255,255)";
 		canvas2d.fillRect(this.sx, this.sy, this.cardWidth, this.cardHeight);
 		canvas2d.drawImage(this.img, this.sx, this.sy, this.cardWidth, this.cardHeight);
 	}
	
 	//카드 만들기(앞면 2초간 보여준 후 뒷면으로 뒤집는 함수 호출)
 	function makedeck() {
  		cardWidth = 190;
  		cardHeight = 130;
  		var bimg = ""
  		for(var i=1; i<9; i++){
  			var img = "touch_game_img/ad"+i+".png";
   			var card = new Card(cardWidth, cardHeight, img, i);
		   	cardArr.push(card);
		}
  		suffle();
  		for(var i=0; i<cardArr.length; i++){
   			cardArr[i].drawface();
  		}
  		setTimeout(carddrawback, 1500);  		
 	}
 	
 	// 카드 뒤집기
 	function carddrawback() {
  		for(var i=0; i<cardArr.length; i++){
   			cardArr[i].drawback();
  		}
  		if(timerfirst) {
  			StartTimer();  			
  			timerfirst=false;
  		}
 	}

 	// 카드 섞기
 	function suffle() {
  		var cardLength = cardArr.length;							// 카드 배열 길이 
  		var select;																		// 카드 배열 선택 인덱스
  		var cardRandomArr = [];											// 랜덤 카드 저장 배열
  		for(var i=0; i<cardLength; i++){
   			select = Math.floor(Math.random()*cardArr.length);
   			cardRandomArr.push(cardArr[select]);			// card배열에 무작위로 추출된 카드 삽입   			
   			cardArr.splice(select,1);										// card배열에서 무작위로 추출된 카드 제거
   			if(i<4) {
	   			cardRandomArr[i].sx=cx;										// 카드 6개의 첫번째 x좌표를 50으로 설정
	   			cardRandomArr[i].sy=cy1;									// 카드 6개의 y좌표를 150으로 설정
	    		cx += (cardWidth+20);											// 카드 5개의 x좌표를 카드너비+30씩 증가하게 설정   				
   			} else {
	   			cardRandomArr[i].sx=cx2;									// 카드 6개의 첫번째 x좌표를 50으로 설정
	   			cardRandomArr[i].sy=cy2;									// 카드 6개의 y좌표를 280으로 설정
	    		cx2 += (cardWidth+20);											// 카드 5개의 x좌표를 카드너비+30씩 증가하게 설정   				
   			}
  		}
  		cardArr=cardRandomArr;										// 무작위로 섞인 카드를 원래 카드 배열로 지정
  		cardRandomArr=[];													// 무작위 카드 배열 초기화
 	}

 	// 마우스 클릭시 함수
 	function choose(ev) {
  		if(ev.offsetX!=null) {
   			var cx=ev.offsetX;
   			var cy=ev.offsetY;
  		} else if(ev.layerX!=null) {
   			var cx=ev.layerX;
   			var cy=ev.layerY;
  		}  		
  		findcard(cx,cy);
 	}
 	
 	// 카드 찾기 및 버그 방지
 	function findcard(cx,cy){
  		var card;  		
  		for(var i=0; i<cardArr.length; i++){
   			card = cardArr[i];
   			if((cx>=card.sx && cx<=(card.sx+card.cardWidth)) && (cy>=card.sy && cy<=(card.sy+card.cardHeight))) {				
				card.drawface();   				   				
				if(card.cardno != no) {
					no = 1;
					setTimeout(carddrawback, 100);					
				} else {
					no += 1;
				}
     		}    		
  		}
  		if(no==9) {
			StopTimer();
  		}
 	}
 	
 	function StartTimer()	{
		 t = setInterval("TimeCheck()",10);
 	}

 	function TimeCheck() {
		var min = Math.floor(i/6000); 								// 분 구하기
		var sec = Math.floor(i/100);						 	   		// 초 구하기
		if(sec>60) {
			sec = sec%60;
		}
		var msec = i%100; 													// milli초 구하기		
		canvas2d.fillStyle = "rgb(0,0,0)";
 		canvas2d.fillRect(370, 480, 200, 60);
		canvas2d.font="bold 30px Tahoma";
  		canvas2d.fillStyle="rgb(255,0,0)";
		canvas2d.fillText(min+"분"+sec+"초"+msec, 410, 520); // 텍스트폼에 출력.
	 	 i++; // 1증가
 	}

 	function StopTimer()	{
		i = 0; // 0으로 초기화
		clearInterval(t); // setInterval()함수 정지시키기..
 	}
 	
</script>
</head>
	<body onLoad="init();">
		<canvas name="canvas" id="canvas" width="950" height="530"></canvas>
	</body>
</html>